<template>
  <div>
    <el-descriptions title="商品明细">
      <el-descriptions-item label="商品ID">{{
        prod.prodId
      }}</el-descriptions-item>
      <el-descriptions-item label="商品名称">{{
        prod.prodName
      }}</el-descriptions-item>
      <el-descriptions-item label="SPU">{{
        prod.prodSpu
      }}</el-descriptions-item>
      <el-descriptions-item label="商品图片">
        <el-image
          :src="prod.prodImage"
          style="width: 50px; height: 50px"
        ></el-image>
      </el-descriptions-item>
      <el-descriptions-item label="上传时间">
        {{ prod.createTime }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
  <div>
    <el-button type="primary" @click="onAddSKU">添加SKU</el-button>
    <div>
      <el-dialog v-model="dialogFormVisible" title="商品SKU添加" width="500">
        <el-form :model="form">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input v-model="form.prodName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品SKU" :label-width="formLabelWidth">
            <el-input v-model="form.prodSku" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品成本" :label-width="formLabelWidth">
            <el-input v-model="form.costPrice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品售价" :label-width="formLabelWidth">
            <el-input v-model="form.prodPrice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品库存" :label-width="formLabelWidth">
            <el-input v-model="form.prodStock" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="onSubmitInfo"> 提交 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
  <div>
    <el-table :data="prodInfoList" style="width: 100%">
      <el-table-column prop="prodId" label="商品ID" />
      <el-table-column prop="prodName" label="商品名称" />
      <el-table-column prop="prodStock" label="库存" />
      <el-table-column prop="prodPrice" label="售价" />
      <el-table-column prop="costPrice" label="成本" />
      <el-table-column prop="prodSku" label="Sku" />
    </el-table>
  </div>
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="searchForm.pageNum"
      v-model:page-size="searchForm.pageSize"
      :page-sizes="[2, 4, 6, 8]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup lang="ts">
import { useRoute } from "vue-router";
import { getProdById, getProdInforList, addProdInfo } from "../api/prod";
import { onMounted, ref } from "vue";

import { ElMessage, type ComponentSize } from "element-plus";

const size = ref<ComponentSize>("default");
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  searchForm.value.pageSize = val;
  loadProdInfoList();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  searchForm.value.pageNum = val;
  loadProdInfoList();
};

const route = useRoute();
const prodId = route.params.prodId;
const prod = ref({
  prodId: 1,
  prodSpu: "123456",
  prodName: "联想笔记本",
  prodType: 4,
  typeName: null,
  brandId: 5,
  brandName: null,
  unitId: 2,
  unitName: null,
  tagId: 4,
  tagName: null,
  appr: "2",
  prodImage:
    "http://192.168.80.192:8888/group1/M00/00/02/wKhQwGhUux6ABhaoABfIHzkqkwc914.png",
  prodStatus: 0,
  prodKind: 1,
  createTime: "2025-06-10 16:51:24",
  createBy: null,
  updateTime: null,
  uodateBy: null,
});

const prodInfoList = ref([]);
const searchForm = ref({
  pageNum: 1,
  pageSize: 2,
  prodId: prodId,
});

const total = ref(0);

const loadProdInfoList = () => {
  getProdInforList(searchForm.value).then((res) => {
    if (res.data.code == 200) {
      prodInfoList.value = res.data.data.records;
      total.value = res.data.data.total;
    }
  });
};
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

const form = ref({
  costPrice: "",
  prodId: "",
  prodName: "",
  prodPrice: "",
  prodSku: "",
  prodStock: "",
});

//添加s商品SKU
const onAddSKU = () => {
  form.value = {
    costPrice: "",
    prodId: "",
    prodName: "",
    prodPrice: "",
    prodSku: "",
    prodStock: "",
  };
  form.value.prodId = prodId;
  dialogFormVisible.value = true;
};

//提交
const onSubmitInfo = () => {
  addProdInfo(form.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("添加成功");
      dialogFormVisible.value = false;
      loadProdInfoList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

//页面加载钩子函数
onMounted(() => {
  getProdById(prodId).then((res) => {
    if (res.data.code == 200) {
      prod.value = res.data.data;
    }
  });
  loadProdInfoList();
});
</script>
